import api from '@/api'
import React, { useEffect, useState } from 'react'
import { Table, message, Form, Space, Tag, Button, Modal, Drawer, Select, Input, Radio, Card } from "antd"
import type { ColumnsType } from 'antd/es/table';
import { SearchOutlined, EditOutlined, CloseOutlined, PlusOutlined, QuestionCircleOutlined } from '@ant-design/icons';

export default function Advice() {
    const [adviceList, setAdviceList] = useState([])
    const [query, setQuery] = useState({
        pageSize: 6,
        currentPage: 1,
        isok: 3
    })
    useEffect(() => {
        getAlladvice(query)
    }, [])
    const getAlladvice = async (query: any) => {
        const res = await api.advice.getOpinion(query)
        console.log("jieguo ", res);
        setAdviceList(res.data.data)
    }
    const updateState1 = async (arg: any, state: number) => {
        console.log("arg", arg);
        const res = await api.advice.updateOpinionState({ id: arg.id, state })
        if (res.data.code == 200) {
            message.success(res.data.msg)
            getAlladvice(query)
        } else {
            message.error(res.data.msg)
        }
    }
    const handleChange = (value: string) => {
        console.log(`selected ${value}`);
        getAlladvice({ ...query, isok: value })
    };
    const columns: ColumnsType<any> = [
        {
            title: '反馈人员',
            dataIndex: 'name',
        },
        {
            title: '电话',
            dataIndex: 'phone',
        },
        {
            title: '反馈信息',
            dataIndex: 'detail',
        },
        {
            title: '提交时间',
            dataIndex: 'createdAt',
        },
        {
            title: '状态',
            dataIndex: 'state',
            render: (text, record) => (
                <>
                    {
                        record.state === 0 ? <Space size="middle">
                            <Button type="primary" icon={<EditOutlined />} onClick={() => updateState1(record, 1)} style={{ margin: '0 2px' }}>查阅</Button>
                        </Space> : (record.state === 1 ? <>已查阅</> : <>状态错误</>)
                    }
                </>
            )
        }
    ];
    return (
        <div>
            <Card>
                <div style={{ display: "flex", justifyContent: "center", margin: "10px 0" }}>
                    筛选：  <Select
                        style={{ width: 120 }}
                        onChange={handleChange}
                        options={[
                            { value: 1, label: '已处理' },
                            { value: 0, label: '未处理' },

                        ]}
                    />
                </div>

                {
                    adviceList ? <>
                        <Table columns={columns} dataSource={adviceList} rowKey="id" />

                    </> : <></>
                }
            </Card>
        </div>
    )
}
